<template>
  <div class="main_container">
    <div v-if="false">
      <!--  main-->
      <el-main>
        <div class="main_container">
          <el-row class="flex-height">

            <el-col :span="12">
              <div class="flex flex-column width-100 center-box1 height-3">
                <div class="flex-1 flex-column flex-height justify-center">

                </div>
              </div>
              <div class="flex flex-column width-100 center-box1 height-3 mt-1" style="height: 25%">
                <div class="flex-1 flex-column flex-height justify-center">

                </div>
              </div>
              <div class="flex flex-column width-100 center-box1 height-3 mt-1">
                <div class="flex-1 flex-column flex-height justify-center">

                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </div>
    <el-row class="flex-height">
      <el-col :span="6">
        <div class="flex-height flex flex-column">
          <div class="flex-1 flex-column content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-2">各栏目发稿量趋势图</div>
              <div ref="chartColumn" id="chartColumn" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-2">各地区发稿量</div>
              <div ref="chartColumn2" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-2">最新问答统计表</div>
              <div ref="chartColumn1" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="flex-height flex flex-column px-1">
          <div class="flex-1 flex-column content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-2 pl-4">实时总发行量</div>
              <div ref="" class="flex-1" style="width:100%;height: 100%">
                <div class="flex-row mt-2 justify-center">
                  <div class="font-32 text-white bold py-1 px-2 num-box ml-1" v-for="(item, index) in zongfaxing" :key="index">{{item}}</div>
                  <!-- <div class="font-32 text-white bold py-1 px-2 num-box ml-1">4</div>
                  <div class="font-32 text-white bold py-1 px-2 num-box ml-1">7</div>
                  <div class="font-32 text-white bold py-1 px-2 num-box ml-1">2</div>
                  <div class="font-32 text-white bold py-1 px-2 num-box ml-1">2</div>
                  <div class="font-32 text-white bold py-1 px-2 num-box ml-1">4</div> -->
                  <div class="font-32 text-white bold py-1 px-2 num-box ml-1">条</div>
                </div>
                <div class="flex-row mt-2 justify-around align-center">
                  <div class="flex-row flex-column justify-center font-32 text-white bold py-1 px-2 num-box1" v-for="(item,index) in data05" :key="index">
                    <div class="font-16 text-white text-center">{{item.name+"/条"}}</div>
                    <div style="text-align: center;"> <span class="font-24 bold text-main">{{item.value}}</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-2 pl-4">热门视频</div>
              <div ref="" class="flex-row align-center justify-around flex-1 width-100">
                <div class="flex-row flex-column justify-center" v-for="(item,index) in data33" :key="index">
                  <img :src="item.imgUrl" style="width: 1.4rem;height: 1.4rem" :alt=item.title>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-2 pl-4">近七日访客数量</div>
              <div ref="chartColumn6" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="flex-height flex flex-column">
          <div class="flex-1 flex-column content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-2">各栏目浏览量趋势图</div>
              <div ref="chartColumn3" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-2">登录次数</div>
              <div ref="chartColumn4" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-2">科普资源类型统计</div>
              <div ref="chartColumn7" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'BigDatapage1',
  data () {
    return {
      data31:[],
      data33:[],
      data23:[],
      data01:[],
      data05:[],
      data25:[],
      data99:[],
      data98:[],
      data97:[],
      maxNum:500,
    }
  },
  created() {
    this.getStatis01()
  },
  
  
  mounted () {
    // this.initChart()
    this.getStatis32()
    this.getStatis33()
    this.getStatis34()
    // this.initChart2()
    this.getStatis23()
    // this.initChart4()
    
    // this.initChart7()
    this.getStatis25()
    this.getStatis99()
    this.getStatis98()
  },
  computed:{
    zongfaxing(){
      //补充为6位
      let obj=this.data01.find(item=>item.name=='实时发行总量')
      if(obj){
        let result=obj.value+1000000
        result+=''
        result=result.substring(1)
        return result.split('')
      }else{
        return ['0','0','0','0','0','0']
      }
    },
  },
  watch:{
    maxNum(newCount, oldCount) {
      console.log(`count变成了${newCount}，之前是${oldCount}`)
    }
  },
  methods: {
    getdata(select,pageNo=1,rownumber=1000){
      return {
            "serviceName": select,
            "colNames": [
            "*"
            ],
            "condition": [],
            "relation_condition": {},
            "page": {
              "pageNo": pageNo,
              "rownumber": rownumber
            }
      }
    },
    getStatis01 () {
      let select = 'srvjk_cnt_jkzyk_ssfxzl_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data01 = res.data.data.filter(item => item.classify_name_f!='').map(item => ({name:item.classify_name_f,value:item.cnt}))
          //给data05赋值 需移除 实时总发行量
          this.data05=this.data01.filter(item=>item.name!='实时发行总量')
        }
      })
    },
    getStatis23(){
      let select = 'srvjk_cnt_pub_area_all_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data23=res.data.data.map(item => ({name:item.area_city,value:item.cnt}));
          this.initChart2();
        }
      })
    }, 
    getStatis99(){
      let select = 'srvjk_cnt_jkzyk_ip7_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data99 = res.data.data
          this.initChart6 ()
        }})
    },
    getStatis98(){
      let select = 'srvjk_cnt_zyst_question_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data98 = res.data.data
          this.initChart1()
        }})

    },
 
    getStatis32 () {
      let select = 'srvjk_cnt_jkzyk_pub_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data32 = res.data.data
          this.initChart()
        }
      })
    },
    getStatis33 () {
      let select = 'srvjk_cnt_jkzyk_rmsp_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data33 = res.data.data.map(item => ({
            imgUrl:item.cover_file_name,
            uuid:item.uid,
            title:item.title_name
          }))
        }
      })
    },
    getStatis34 () {
      let select = 'srvjk_cnt_jkzyk_login_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select,1,5)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data34 = res.data.data.map(item => ({
            name:item.login_user,
            num:item.cnt
          }))
          this.initChart4()//登录次数
        }
      })
    },
    getStatis25 () {
      let select = 'srvjk_cnt_jkzyk_classify_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data25 = res.data.data.map(item => ({
            name:item.classify_str,
            value:item.classify_cnt
          }))
          this.initChart7()
        }
      })
    },
    changeMax(data){
        console.log(data);
      },
    initChart () {
      this.data32=this.data32.map(item =>({
        ...item,
        time:item.calendar_year+'-'+String(item.calendar_month).padStart(2, '0')
      }))
      let timeArr=[]
      //补充年月
      let time=this.data32.map(item=>item.time+'-01');
      time=time.sort()
      //取起始年月日 截止年月日
      var timeStart=time[0]
      var timeEnd=time[time.length-1]
      let dateStart=new Date(timeStart)
      let dateEnd=new Date(timeEnd)
      for(;dateStart<=dateEnd;dateStart.setMonth(dateStart.getMonth()+1)){
        timeArr.push(dateStart.toISOString().substring(0,7))
      }
      // throw new Error('暂时不用')
      //生成数据
      var datas = [[],[],[],[],[],[],[],[]]
      var datas2 = [[],[],[],[],[],[],[],[]]
      let titlename=['百姓健康系列栏目','健康陕西','健康知识','科普资料','宣传活动','头条资讯','中医科普资料','临时活动']
      let arr=[]
      for(let i=0;i<titlename.length;i++){
        arr.push(this.data32.filter(item2=>item2.classify_name==titlename[i]))
      }
      timeArr.forEach(item=>{
        for(let i=0;i<arr.length;i++){
          let obj=arr[i].find(item2=>item2.time==item)
          if(obj){
            datas[i].push(obj.pub_ratio)
            datas2[i].push(obj.view_ratio)
          }else{
            datas[i].push(0)
            datas2[i].push(0)
          }
        }
      })

      this.chartColumn = this.$echarts.init(this.$refs.chartColumn)
      this.chartColumn3 = this.$echarts.init(this.$refs.chartColumn3)
      // 统计百分比
      //var data1 = [14, 15, 65, 24, 75, 23, 24, 43, 27, 72, 12, 53]  //健康陕西
      var jsons=[]
      var jsons2=[]
      for(let i=0;i<datas.length;i++)
      {
        jsons[i]={
        chart0: {
          // xcategory: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          xcategory:timeArr,
          low: datas[i],
          lowLine: []
        }}
        jsons2[i]={
        chart0: {
          // xcategory: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          xcategory:timeArr,
          low: datas2[i],
          lowLine: []
        }
      }
      }
      var zrUtil = this.$echarts.util
      for(let i=0;i<jsons.length;i++){
        let item1=jsons[i]
        zrUtil.each(item1.chart0.xcategory, function (item, index) {
        item1.chart0.lowLine.push([{
          coord: [index, item1.chart0.low[index]]
        }, {
          coord: [index + 1, item1.chart0.low[index + 1]]
        }])
      })
        item1=jsons2[i]
        zrUtil.each(item1.chart0.xcategory, function (item, index) {
        item1.chart0.lowLine.push([{
          coord: [index, item1.chart0.low[index]]
        }, {
          coord: [index + 1, item1.chart0.low[index + 1]]
        }])
      })
      }
      let serires = []
      let serires2 = []
      let colors = ['#b41c0f', '#f5f386', '#439109', '#4667e7', '#8774f4', '#954416', '#2e2e36', '#0550e7']
      for(let i=0;i<titlename.length;i++){
        serires.push({
          name: titlename[i],
          type: 'line',
          // smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          itemStyle: {
            normal: {
              color: colors[i]
            }
          },
          data: datas[i]
        },
        {
          name: titlename[i],
          type: 'lines',
          coordinateSystem: 'cartesian2d',
          zlevel: 1,
          smooth: true,
          symbol: 'circle',
          effect: {
            show: true,
            smooth: true,
            period: 2,
            symbolSize: 4
          },
          lineStyle: {
            normal: {
              color: colors[i],
              width: 0,
              opacity: 0,
              curveness: 0
            }
          },
          data: jsons[i].chart0.lowLine
        })
        serires2.push({
          name: titlename[i],
          type: 'line',
          // smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          itemStyle: {
            normal: {
              color: colors[i]
            }
          },
          data: datas2[i]
        },
        {
          name: titlename[i],
          type: 'lines',
          coordinateSystem: 'cartesian2d',
          zlevel: 1,
          smooth: true,
          symbol: 'circle',
          effect: {
            show: true,
            smooth: true,
            period: 2,
            symbolSize: 4
          },
          lineStyle: {
            normal: {
              color: colors[i],
              width: 0,
              opacity: 0,
              curveness: 0
            }
          },
          data: jsons2[i].chart0.lowLine
        })
      }

      var option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#15ecf4'
            }
          },
          backgroundColor: 'rgba(0,0,0,.8)',
          extraCssText: 'box-shadow: 4px 4px 10px rgba(21, 250, 255,.6);',
          formatter: function (params) {
            var result = params[0].name + '<br>'
            var total = 0
            params.forEach(function (item) {
              if(total>2){
                return
              }
              result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>'
              // 判断设置增长还是降低
              if (parseFloat(item.data) >= 0) {
                result += item.seriesName + ': ' + '<span class="growth">增长' + Math.abs(item.data) + '</span><br>'
              } else if (parseFloat(item.data) < 0) {
                result += item.seriesName + ': ' + '<span class="reduce">降低' + Math.abs(item.data) + '</span><br>'
              }
              total += 1
            })
            return result
          }
        },
        legend: {
          data: ['百姓健康系列栏目', '健康陕西', '健康知识', '科普资料', '宣传活动','头条资讯','中医科普资料','临时活动'],
          textStyle: {
            fontSize: 8,
            color: 'rgb(0,253,255,0.6)'
          },
          top: '0%',
          left: '10%'
        },
        grid: {
          bottom: '15%',
          left: '10%',
          right: '10%',
          top: '18%'
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#15faff'
            }

          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true
          },
          // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          data:timeArr,
        },
        yAxis: {
          max: Math.max(...datas[0],...datas[1],...datas[2],...datas[3],...datas[4],...datas[5],...datas[6]),
          min:Math.min(...datas[0],...datas[1],...datas[2],...datas[3],...datas[4],...datas[5],...datas[6]),
          splitNumber: 3,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#4b4d64'
            }
          },
          axisLabel: {
            // formatter: '{value} %',
            textStyle: { // 改变刻度字体样式
              color: '#ffffff'
            }
          }
        },
        series: serires
      }
      var option2 = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#15ecf4'
            }
          },
          backgroundColor: 'rgba(0,0,0,.8)',
          extraCssText: 'box-shadow: 4px 4px 10px rgba(21, 250, 255,.6);',
          formatter: function (params) {
            var result = params[0].name + '<br>'
            var total = 0
            params.forEach(function (item) {
              if(total>2){
                return
              }
              result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>'
              // 判断设置增长还是降低
              if (parseFloat(item.data) >= 0) {
                result += item.seriesName + ': ' + '<span class="growth">增长' + Math.abs(item.data) + '</span><br>'
              } else if (parseFloat(item.data) < 0) {
                result += item.seriesName + ': ' + '<span class="reduce">降低' + Math.abs(item.data) + '</span><br>'
              }
              total += 1
            })
            return result
          }
        },
        legend: {
          data: ['百姓健康系列栏目', '健康陕西', '健康知识', '科普资料', '宣传活动','头条资讯','中医科普资料','临时活动'],
          textStyle: {
            fontSize: 8,
            color: 'rgb(0,253,255,0.6)'
          },
          top: '0%',
          left: '10%'
        },
        grid: {
          bottom: '15%',
          left: '10%',
          right: '10%',
          top: '18%'
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#15faff'
            }

          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true
          },
          // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          data:timeArr,
        },
        yAxis: {
          max: Math.max(...datas2[0],...datas2[1],...datas2[2],...datas2[3],...datas2[4],...datas2[5],...datas2[6]),
          min:Math.min(...datas2[0],...datas2[1],...datas2[2],...datas2[3],...datas2[4],...datas2[5],...datas2[6]),
          splitNumber: 3,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#4b4d64'
            }
          },
          axisLabel: {
            // formatter: '{value} %',
            textStyle: { // 改变刻度字体样式
              color: '#ffffff'
            }
          }
        },
        series: serires2
      }
      this.chartColumn.setOption(option)
      this.chartColumn3.setOption(option2)
    },
    initChart1 () {
      console.log(this.data98);
      let timeArr = this.data98.map(item => item.calendar_year+'-'+item.calendar_month)
      let questionArr = this.data98.map(item => item.question_cnt)
      let answerArr = this.data98.map(item => item.answer_cnt)
      let max = Math.max(...questionArr, ...answerArr)

      this.chartColumn1 = this.$echarts.init(this.$refs.chartColumn1)
      const option = {
        backgroundColor: 'transparent',
        title: {
          textStyle: {
            color: '#6a9cd5'
          },
          text: '',
          left: 'center'
        },
        tooltip: { // 鼠标悬浮弹出提示框
          trigger: 'axis', // 提示框弹出的触发时间，折线图和柱状图为axis
          formatter: '{a} <br/>{b} : {c} '// 提示框提示的信息，{a}series内的名字，{b}为块状的名字，{c}为数值
        },
        grid: { // 统计图距离边缘的距离
          top: '20%',
          left: '10%',
          right: '10%',
          bottom: '15%'
        },
        legend: {
          data: ['问题数', '回答数'],
          textStyle: {
            fontSize: 12,
            color: 'rgb(0,253,255,0.6)'
          }
        },
        xAxis: [{ // x轴
          type: 'category', // 数据类型为不连续数据
          boundaryGap: false, // 坐标轴两边是否留白
          axisLine: { // 坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: '#233e64' // x轴颜色
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: { show: true }, // 刻度点数轴
          data: timeArr
        }],
        yAxis: [{ // y轴的相关设置
          type: 'value', // y轴数据类型为连续的数据
          min: 0, // y轴上的刻度最小值
          max: max, // y轴上的刻度最大值
          splitNumber: 7, // y轴上的刻度段数
          splitLine: { // y轴上的y轴线条相关设置
            show: true,
            lineStyle: {
              color: '#233e64'
            }
          },
          axisLine: { // y轴的相关设置
            show: true,
            lineStyle: {
              color: '#233e64' // y轴颜色
            }
          },
          axisLabel: { // y轴的标签相关设置
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: { show: true } // 刻度点数轴
        }],
        series: [{
          name: '问题数',
          type: 'line', // 统计图类型为折线图
          smooth: true, // 是否平滑曲线显示
          symbolSize: 0, // 数据点的大小，[0,0]//b表示宽度和高度
          lineStyle: { // 线条的相关设置
            normal: {
              color: '#D67C15' // 线条颜色
            }
          },
          areaStyle: { // 区域填充样式
            normal: {
              // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(214,124,21, 0.9)' },
                { offset: 0.7, color: 'rgba(214,124,21, 0)' }
              ], false),

              shadowColor: 'rgba(214,124,21, 0.9)', // 阴影颜色
              shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: questionArr
        },
        {
          name: '回答数',
          type: 'line', // 统计图类型为折线图
          smooth: true, // 是否平滑曲线显示
          symbolSize: 0, // 数据点的大小，[0,0]//b表示宽度和高度
          lineStyle: { // 线条的相关设置
            normal: {
              color: '#16E4F1' // 线条颜色
            }
          },
          areaStyle: { // 区域填充样式
            normal: {
              // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(119,214,255, 0.9)' },
                { offset: 0.7, color: 'rgba(77,221,250, 0)' }
              ], false),

              shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
              shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: answerArr
        }]
      }
      this.chartColumn1.setOption(option)
    },
    initChart2 () {
      this.chartColumn2 = this.$echarts.init(this.$refs.chartColumn2)
      const option = {
        backgroundColor: 'transparent',
        grid: {
          top: '15%',
          right: '5%',
          left: '15%',
          bottom: '25%'
        },
        legend: {
          data: ['发稿量'],
          textStyle: {
            fontSize: 12,
            color: 'rgb(0,253,255,0.6)'
          }
        },
        xAxis: [{
          type: 'category',
          color: '#59588D',
          data: this.data23.map(item=>item.name),
          axisPointer: {
            type: 'line'
          },
          axisLine: {
            lineStyle: {
              color: '#272456'
            }
          },
          axisLabel: {
            margin: 20,
            color: '#fff',
            textStyle: {
              fontSize: 12
            }
          }
        }],
        yAxis: [{
          min: 0,
          max: 'dataMax',
          axisLabel: {

            color: '#fff'
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#272456'
            }
          }
        }],
        series: [{
          name: '发稿量',
          type: 'bar',
          data: this.data23.map(item=>item.value),
          barWidth: '14px',
          itemStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#6F48F0' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#BC6FD6' // 100% 处的颜色
              }], false),
              barBorderRadius: [30, 30, 0, 0],
              shadowColor: 'rgba(0,255,225,1)',
              shadowBlur: 4
            }
          },
          label: {
            // normal: {
            //     show: true,
            //     lineHeight: 30,
            //     width: 80,
            //     height: 30,
            //     backgroundColor: '#252453',
            //     borderRadius: 200,
            //     position: ['-8', '-60'],
            //     distance: 1,
            //     formatter: [
            //         '    {d|●}',
            //         ' {a|{c}%}     \n',
            //         '    {b|}'
            //     ].join(''),
            //     rich: {
            //         d: {
            //             color: '#3CDDCF',
            //         },
            //         a: {
            //             color: '#fff',
            //             align: 'center',
            //         },
            //         b: {
            //             width: 1,
            //             height: 30,
            //             borderWidth: 1,
            //             borderColor: '#234e6c',
            //             align: 'left'
            //         },
            //     }
            // }
          }
        }]
      }
      this.chartColumn2.setOption(option)
    },
    initChart4 () {
      this.chartColumn4 = this.$echarts.init(this.$refs.chartColumn4)
      
      // var yData = ['瑶瑶', '梦溪', '一一', '小张', '苏落']
      var temp1=this.data34.map(item=>item.name);
      temp1.reverse();
      var yData =temp1
      // var data = [211, 264, 310, 376, 391]
      var temp2=this.data34.map(item=>item.num);
      temp2.reverse()
      var data = temp2;
      var color = ['#6BF1BF', '#C7F895', '#E6D349', '#F8A065', '#FF6B5F']
      var seriesData = []
      data.map((item, index) => {
        seriesData.push({
          name: '',
          value: item,
          itemStyle: {
            normal: {
              color: color[index],
              barBorderRadius: 12
            }
          }
        })
      })
      var option = {
        backgroundColor: 'transparent',
        legend: {
          show: false
        },
        grid: {
          left: '5%',
          right: '14%',
          bottom: '8%',
          top: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#363e83'
              }
            },
            axisLabel: {
              inside: false,
              textStyle: {
                color: '#fff',
                fontWeight: 'normal',
                fontSize: 14
              }
            },
            data: yData
          }, {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: yData
          }, {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: yData
          }],
        series: [
          {
            name: '',
            type: 'bar',
            stack: '1',
            yAxisIndex: 0,
            data: seriesData,
            color: ['#6BF1BF', '#C7F895', '#E6D349', '#F8A065', '#FF6B5F'],
            barWidth: 20,
            z: 3
          },
          {
            name: '',
            type: 'bar',
            yAxisIndex: 2,
            data:temp2.map(item=>Math.max(...temp2)),
            barWidth: 15,
            itemStyle: {
              color: '#001a2b',
              barBorderRadius: 12
            },
            label: {
              normal: {
                show: true,
                color: '#00FFEC',
                fontSize: 14,
                padding: [0, 0, 0, 20],
                position: 'right',
                formatter: function (params) {
                  return data[params.dataIndex]
                }
              }
            },
            z: 0
          }
        ]
      }
      this.chartColumn4.setOption(option)
    },
    get7Days(){
      // 创建一个空数组来存储日期
      let dates = [];
      
      // 获取当前日期
      let now = new Date();
      
      // 循环获取最近 7 天的日期
      for (let i = 0; i < 7; i++) {
        // 获取当前日期的时间戳
        let timestamp = now.getTime();
      
        // 计算 i 天前的时间戳
        let dayTimestamp = 24 * 60 * 60 * 1000; // 一天的毫秒数
        let iDayAgoTimestamp = timestamp - i * dayTimestamp;
      
        // 转换为日期对象
        let date = new Date(iDayAgoTimestamp);
      
        // 格式化日期为 "yyyy-MM-dd" 的字符串并存入数组
        let year = date.getFullYear();
        let month = ("0" + (date.getMonth() + 1)).slice(-2);
        let day = ("0" + date.getDate()).slice(-2);
        dates.push(year + "-" + month + "-" + day);
      }
      dates.reverse();
      return dates;
    },
    initChart6 () {
      this.chartColumn6 = this.$echarts.init(this.$refs.chartColumn6)
      //
      const option = {
        backgroundColor: 'transparent',
        grid: {
          top: '15%',
          right: '5%',
          left: '8%',
          bottom: '30%'
        },
        legend: {
          data: ['IP数量'],
          textStyle: {
            fontSize: 12,
            color: 'rgb(0,253,255,0.6)'
          }
        },
        xAxis: [{
          type: 'category',
          color: '#59588D',
          // data: ['10月23日', '10月24日', '10月25日', '10月26日', '10月27日', '10月28日', '10月29日'],
          data: this.data99.map(item=>item.calendar_date),
          axisPointer: {
            type: 'line'
          },
          axisLine: {
            lineStyle: {
              color: '#272456'
            }
          },
          axisLabel: {
            margin: 15,
            color: '#fff',
            textStyle: {
              fontSize: 10
            }
          }
        }],
        yAxis: [{
          min: 0,
          max: Math.max(...this.data99.map(item=>item.data_amount)),
          axisLabel: {

            color: '#fff'
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#272456'
            }
          }
        }],
        series: [{
          name: 'IP数量',
          type: 'bar',
          data: this.data99.map(item=>item.data_amount),
          barWidth: '14px',
          itemStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#0077FF' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#05F7FF' // 100% 处的颜色
              }], false),
              barBorderRadius: [30, 30, 0, 0],
              shadowColor: 'rgba(0,255,225,1)',
              shadowBlur: 4
            }
          },
          label: {
          }
        }]
      }
      this.chartColumn6.setOption(option)
    },
    initChart7 () {
      this.chartColumn7 = this.$echarts.init(this.$refs.chartColumn7)
      var img = ''

      var trafficWay = this.data25

      var data = []
      var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
      for (var i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        })
      }
      var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [85, 69],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'outside',
              color: '#ddd',
              formatter: function (params) {
                // var percent = 0
                // var total = 0
                // for (var i = 0; i < trafficWay.length; i++) {
                //   total += trafficWay[i].value
                // }
                // percent = ((params.value / total) * 100).toFixed(0)
                if (params.name !== '') {
                  return params.name + '：' + params.value
                } else {
                  return ''
                }
              }
            },
            labelLine: {
              length: 1,
              length2: 60,
              show: true,
              color: '#00ffff'
            }
          }
        },
        data: data
      }]
      const option = {
        backgroundColor: 'transparent',
        color: color,
        graphic: {
          elements: [{
            type: 'image',
            z: 3,
            style: {
              image: img,
              width: 108,
              height: 108
            },
            left: 'center',
            top: 'center',
            position: [100, 100]
          }]
        },
        grid: {
          left: '8%',
          top: '18%',
          right: '5%',
          bottom: '22%'
        },
        tooltip: {
          show: false
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }
      this.chartColumn7.setOption(option)
    }
  }
}
</script>

<style scoped>
@import "../../../assets/scss/pages/data.scss";
.text-main{
  color: #00D8FF;
}
.height-3{
  height: 32.6%;
}
.main_container {
  height: calc(100vh - 167px);
}
.el-col{
  height: 100%;
}
.content-box1{
  background: url("../../../assets/img/bigData/data-bg.png");
  background-size: 100% 100%;
}
.center-box1{
  margin-left:10px;
  margin-right:10px;
  width: calc(100% - 20px);
  background: url("../../../assets/img/bigData/data-center-bg.png");
  background-size: 100% 100%;
}
/deep/.el-table, /deep/.el-table th, /deep/.el-table tr, /deep/.el-table--enable-row-hover .el-table__body tr:hover>td{
  background: transparent !important;
}
/deep/.el-table th.is-leaf, /deep/.el-table td{
  border: none !important;
}
/deep/.el-table{
  color: #fff !important;
}
/deep/.el-table thead{
  color: #00FFF0 !important;
}
.num-box{
  background: url("../../../assets/img/bigData/data-num2.png");
  background-size: 100% 100%;
}
.num-box1{
  background: url("../../../assets/img/bigData/data-num.png");
  background-size: 100% 100%;
  height: 105px;
}
.main_container {
  height: 100%;
}
/deep/.el-main{
  padding: 10px !important;
}
/deep/.el-container {
  flex-direction: column;
}
.flex-height {
  height: 100%;
}
</style>
